@extends('users.layouts')

@section('css')
    <style>
        .friend-box{
            width: 80%;
            border: 1px solid #ccc;
            margin: 100px auto;
        }
    </style>
@stop

@section('js')
    <script src="{{ asset('/js/chat/index.js') }}"></script>
@stop

@section('contents')
    <div>
        @include('users.login')
        @include('users.register')

        <div  v-if="access_token">
            <el-row :gutter="10">
                <el-col :span="24">
                    连接状态：<span style="color: red;">@{{ connectStatus }}</span>
                    <span style="float: right"><el-button type="primary" @click="logout">退出</el-button></span>
                </el-col>
            </el-row>
            <div class="friend-box">
                <el-row :gutter="10">
                    <el-col :span="12">
                        <el-card class="box-card" style="min-height: 500px;">
                            <div slot="header" class="clearfix">
                                <el-button type="text">好友列表</el-button>
                            </div>
                            <div v-for="(friend, index) in friendList">
                                <el-link type="success" :underline="true" :href="'/chat/room?uid=' + friend.id" target="_blank">@{{ friend.user_name }}</el-link>
                                <el-tag style="margin-left: 100px;" type="success" v-if="friend.message">@{{ friend.message }}</el-tag>
                                <el-tag type="danger" v-if="friend.count">@{{ friend.count }}</el-tag>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="12">
                        <el-card class="box-card" style="min-height: 500px;">
                            <div slot="header" class="clearfix">
                                <el-button type="text">好友申请</el-button>
                                <span style="float: right;color: red;">@{{ handleMessage }}</span>
                            </div>

                            <el-row :gutter="10" >
                                <el-col :span="10">
                                    <el-input type="text" name="user_name" v-model="friendName"></el-input>
                                </el-col>
                                <el-col :span="4">
                                    <el-button type="primary" @click="addFriend">添加好友</el-button>
                                </el-col>
                            </el-row>
                            <el-row :gutter="10" style="margin-top: 50px;">
                                <el-col :span="24">
                                    <el-link type="danger" :underline="false">好友申请列表：</el-link>
                                </el-col>
                            </el-row>
                            <el-row :gutter="10" v-for="(friend, index) in applyList" style="margin-top: 20px;">
                                <el-col :span="24">
                                    <div>来自
                                        <el-tag type="success" @click="handleFriend(friend)">@{{ friend.user_name }}
                                        </el-tag>
                                        的好友申请
                                    </div>
                                    <div>留言：<span>@{{ friend.message }}</span></div>
                                </el-col>
                            </el-row>
                        </el-card>
                    </el-col>
                </el-row>
            </div>
        </div>

    </div>
@stop
